<template>
  <div class="wrap backgroundAuto" :style="{ backgroundImage: `url('${ backgroundImage }')` }">
    <p class="text">Login</p>
    <div class="btn-box">
      <div class="btn" @click="goHome">Home</div>
      <div class="btn" @click="go404">404</div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useRouter } from "vue-router"
import { storeState, storeCommit } from "@/store/tools"
import backgroundImage from "@/assets/vue.svg"

console.log('首次进入')
const router = useRouter()
const mode = import.meta.env.VITE_CURRENTMODE

function goHome() {
  storeCommit('setToken', 'token')
  storeCommit('setUserInfo', { type: 'HHR' })
  localStorage.setItem('token', 'token')
  router.push({ name: 'Home' })
}
function go404() {
  router.push({ name: '404' })
}
</script>

<style scoped lang="less">
.wrap {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  .text {
    font-size: 40px;
    margin-bottom: 20px;
    color: white;
  }
  .btn-box {
    width: 200px;
    height: 40px;
  }
}

.btn-box {
  display: flex;
  justify-content: space-between;
  .btn {
    width: 45%;
    height: 40px;
    color: #ffa07a;
    text-align: center;
    font-size: 20px;
    line-height: 40px;
    border-radius: 4px;
    border: solid 0.5px rgba(0, 0, 0, 0);
    transition: 0.2s;
  }
  .btn:active {
    border-color: #b0c4de;
    color: #b0c4de;
  }
}
</style>
